<template>
    <div>
        <div class="topImg " data-aos="fade"  data-aos-duration="1000">
            <img src="@/assets/img/aboutus.png" alt="">
        </div>
        <div class="page_content">
            <div class="tip" data-aos="fade-up"  data-aos-duration="1000">
                <div class="img">
                    <img src="@/assets/img/aboutus2.png" alt="">
                </div>
                <div class="spirit">
                    <span class="title  animate__fadeInRight animate__animated">
                        企业愿景
                    </span>
                    <span class="wow animate__fadeInRight animate__animated" data-wow-duration="1.1s">做行业的领先者</span>
                    <span class="title wow animate__fadeInRight animate__animated" data-wow-duration="1.2s">
                        企业使命
                    </span>
                    <span class="wow animate__fadeInRight animate__animated" data-wow-duration="1.3s">为老百姓造一辆好车</span>
                    <span class="title wow animate__fadeInRight animate__animated" data-wow-duration="1.4s">
                        核心价值观
                    </span>
                    <span class=" wow animate__fadeInRight animate__animated" data-wow-duration="1.5s"> 创新 互助 诚信
                        共赢</span>
                    <span class="title wow animate__fadeInRight animate__animated" data-wow-duration="1.6s">
                        企业精神
                    </span>
                    <span class=" wow animate__fadeInRight animate__animated" data-wow-duration="1.7s"> 工匠精神 艰苦奋斗
                        勇于创新</span>
                </div>
            </div>
            <div class="about">
                <div class="title">
                    创新与发展
                </div>
                <div class="intro">
                    富贵泉专注于产品的自主研发和创新，历经多年发展，富贵泉已成为电动三轮及其零部 件研发、生产、销售、服务于一体的高端“智”造企业
                </div>
                <div class="data">
                    <div>
                        <span class="num">1000+</span>
                        <span>专利认证</span>
                    </div>
                    <div>
                        <span class="num">100+</span>
                        <span>研发人员</span>
                    </div>
                    <div>
                        <span class="num">3千万+</span>
                        <span>用户</span>
                    </div>
                    <div>
                        <span class="num">3</span>
                        <span>技术研发中心</span>
                    </div>
                    <div>
                        <span class="num">6</span>
                        <span>产品实验室</span>
                    </div>
                    <div>
                        <span class="num">30+</span>
                        <span>出口国家</span>
                    </div>
                    <div>
                        <span class="num">2000+</span>
                        <span>门店</span>
                    </div>
                    <div>
                        <span class="num">5</span>
                        <span>售后服务企业</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="botImg " data-aos="fade"  data-aos-duration="1000">
            <img src="@/assets/img/about3.png" alt="">
        </div>
        <div class="botImg" data-aos="fade"  data-aos-duration="1000">
            <img src="@/assets/img/about4.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        // this.$nextTick(() => {
        //     this.$wow.init()
        //     window.scrollTo({
        //         top: window.scrollY + 1,
        //         behavior: "smooth"
        //     })
        // })

    }
}
</script>

<style lang="scss" scoped>
.topImg,
.botImg {
    position: relative;
    font-size: 0;

    img {
        width: 100%;
        height: auto;
    }

}

.page_content {
    width: 100%;

    .tip {
        padding: 0 150px 0 170px;
        margin-bottom: 114px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 661px;
        width: 100%;
        margin-top: 117px;

        .img {
            width: 852px;
            height: 661px;

            img {
                width: 852px;
                height: 661px;
                object-fit: fill;
            }
        }

        .spirit {
            flex: 1;
            height: 661px;
            padding: 120px 0 98px 135px;
            background-color: #F5F5F5;

            span {
                margin: 25px 0;
                display: block;
                font-family: MiSans;
                font-weight: 400;
                font-size: 24px;
                color: #000;
            }

            .title {
                color: #FF0000;
            }
        }
    }

    .about {
        padding: 0 150px 0px 170px;

        .title {
            font-family: MiSans;
            font-weight: 400;
            font-size: 85px;
            color: #000000;
            margin-bottom: 44px;
            text-align: center;
        }

        .intro {
            font-family: MiSans;
            font-weight: 400;
            font-size: 36px;
            color: #000000;
            padding: 0 150px;
            text-align: center;
            line-height: 60px;
        }

        .data {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 130px;

            >div {
                margin-bottom: 110px;
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-family: MiSans;
                font-weight: 400;
                font-size: 25px;
                color: #000000;

                .num {
                    margin-bottom: 27px;
                    font-family: OPPOSans;
                    font-weight: normal;
                    font-size: 51px;
                    color: #FF0000;
                }
            }
        }
    }
}
</style>